<!DOCTYPE html>
<html lang="en" class="is-white">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
      Installing Plugin | Zoraxy Documentation
    </title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.js"></script>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Code highlight -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
    <!-- additional languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/c.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/xml.min.js"></script>
    <style>
      #msgbox{
      position: fixed;
      bottom: 1em;
      right: 1em;
      z-index: 9999;
      }

      @keyframes fadeIn {
      from {
      opacity: 0;
      }
      to {
      opacity: 1;
      }
      }

      dialog[open] {
      animation: fadeIn 0.3s ease-in-out;
      }

      code{
      border-radius: 0.5rem;
      }
    </style>
    <script src="/plugins/html/assets/theme.js"></script>
  </head>
  <body>
    <div class="ts-content">
      <div class="ts-container">
        <div style="float: right;">
          <button class="ts-button is-icon" id="darkModeToggle">
            <span class="ts-icon is-moon-icon"></span>
          </button>
        </div>
        <div class="ts-tab is-pilled">
          <a href="" class="item" style="user-select: none;">
            <img id="sysicon" class="ts-image" style="height: 30px" white_src="/plugins/html/assets/logo.png" dark_src="/plugins/html/assets/logo_white.png" src="/plugins/html/assets/logo.png"></img>
          </a>
          <a href="#!" class="is-active item">
            Documents
          </a>
          <a href="https://github.com/tobychui/zoraxy/tree/main/example/plugins" target="_blank" class="item">
            Examples
            <span class="ts-icon is-arrow-up-right-from-square-icon"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="ts-divider"></div>
    <div>
      <div class="has-padded">
        <div class="ts-grid mobile:is-stacked">
          <div class="column is-4-wide">
            <div class="ts-box">
              <div class="ts-menu is-end-icon">
                <a class="item">
                  Introduction
                  <span class="ts-icon is-caret-down-icon"></span>
                </a>
                <div class="ts-menu is-dense is-small is-horizontally-padded">
                  <a class="item" href="/plugins/html/1. Introduction/1. What is Zoraxy Plugin.html">
                    What is Zoraxy Plugin
                  </a>
                  <a class="item" href="/plugins/html/1. Introduction/2. Getting Started.html">
                    Getting Started
                  </a>
                  <a class="item is-active" href="/plugins/html/1. Introduction/3. Installing Plugin.html">
                    Installing Plugin
                  </a>
                  <a class="item" href="/plugins/html/1. Introduction/4. Enable Plugins.html">
                    Enable Plugins
                  </a>
                  <a class="item" href="/plugins/html/1. Introduction/5. Viewing Plugin Info.html">
                    Viewing Plugin Info
                  </a>
                </div>
                <a class="item">
                  Architecture
                  <span class="ts-icon is-caret-down-icon"></span>
                </a>
                <div class="ts-menu is-dense is-small is-horizontally-padded">
                  <a class="item" href="/plugins/html/2. Architecture/1. Plugin Architecture.html">
                    Plugin Architecture
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/2. Introspect.html">
                    Introspect
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/3. Configure.html">
                    Configure
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/4. Capture Modes.html">
                    Capture Modes
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/5. Plugin UI.html">
                    Plugin UI
                  </a>
                  <a class="item" href="/plugins/html/2. Architecture/6. Compile a Plugin.html">
                    Compile a Plugin
                  </a>
                </div>
                <a class="item">
                  Basic Examples
                  <span class="ts-icon is-caret-down-icon"></span>
                </a>
                <div class="ts-menu is-dense is-small is-horizontally-padded">
                  <a class="item" href="/plugins/html/3. Basic Examples/1. Hello World.html">
                    Hello World
                  </a>
                  <a class="item" href="/plugins/html/3. Basic Examples/2. RESTful Example.html">
                    RESTful Example
                  </a>
                  <a class="item" href="/plugins/html/3. Basic Examples/3. Static Capture Example.html">
                    Static Capture Example
                  </a>
                  <a class="item" href="/plugins/html/3. Basic Examples/4. Dynamic Capture Example.html">
                    Dynamic Capture Example
                  </a>
                </div>
                <a class="item" href="/plugins/html/index.html">
                  index
                </a>
                <a class="item" href="/plugins/html/zoraxy_plugin API.html">
                  zoraxy_plugin API
                </a>
              </div>
            </div>
          </div>
          <div class="column is-12-wide">
            <div class="ts-box">
              <div class="ts-container is-padded has-top-padded-large">
                <h1 id="installing-plugin">
                  Installing Plugin
                </h1>
                <p>
                  <p class="ts-text">
                    Last Update: 25/05/2025
                  </p>
                </p>
                <div class="ts-divider has-top-spaced-large"></div>
                <h3 id="install-via-plugin-store">
                  Install via Plugin Store
                </h3>
                <p>
                  <p class="ts-text">
                    (Work in progress)
                  </p>
                </p>
                <h3 id="manual-install">
                  Manual Install
                </h3>
                <p>
                  <p class="ts-text">
                    The plugin shall be placed inside the
                    <span class="ts-text is-code">
                      plugins/{{plugin_name}}/
                    </span>
                    directory where the binary executable name must be matching with the plugin name.
                  </p>
                </p>
                <p>
                  <p class="ts-text">
                    If you are on Linux, also make sure Zoraxy have the execution permission of the plugin. You can use the following command to enable execution of the plugin binary on Linux with the current user (Assume Zoraxy is run by the current user)
                  </p>
                </p>
                <pre><code class="language-bash">cd ./plugins/{{plugin_name}}/
chmod +x ./{{plugin_name}}
</code></pre>
                <p>
                  Sometime plugins might come with additional assets other than the binary file. If that is the case, extract all of the plugins content into the folder with the plugin&rsquo;s name.
                </p>
                <p>
                  <p class="ts-text">
                    After the folder structure is ready, restart Zoraxy. If you are using systemd for Zoraxy, use
                    <span class="ts-text is-code">
                      sudo systemctl restart zoraxy
                    </span>
                    to restart Zoraxy via systemd service.
                  </p>
                </p>
              </div>
              <br>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ts-container">
      <div class="ts-divider"></div>
      <div class="ts-content">
        <div class="ts-text">
          Zoraxy © tobychui
          <span class="thisyear">
            2025
          </span>
        </div>
      </div>
    </div>
    <script>
      $(".thisyear").text(new Date().getFullYear());
    </script>
    <script>
      hljs.highlightAll();
    </script>
  </body>
</html>